<template>
    <div class="right-container">
        <RightTop class="right-top box"></RightTop>
        <RightCenter class="right-center box"></RightCenter>
        <RightBottom class="right-bottom box"></RightBottom>
    </div>
</template>

<script setup lang="ts" name="index">
import RightTop from './components/RightTop.vue';
import RightCenter from './components/RightCenter.vue';
import RightBottom from './components/RightBottom.vue';


</script>

<style scoped lang="scss">
.right-container {
    height: 1040px;
    display: flex;
    flex-direction: column;

    .right-top {
        flex: 1;
        padding: 20px;
    }

    .right-center {
        flex: 1.5;
        padding: 20px;
    }

    .right-bottom {
        flex: 1;
        padding: 20px;
    }

    .box {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        transition: all 0.3s ease;
        margin-bottom: 20px;
    }
}
</style>